<div class="demo-box">
  <h2 class="title">Tag 标签组件</h2>
  <tiny-tag>标签一</tiny-tag>
  <tiny-tag type="success">标签二</tiny-tag>
  <tiny-tag type="info">标签三</tiny-tag>
  <tiny-tag type="warning">标签四</tiny-tag>
  <tiny-tag type="danger">标签五</tiny-tag>
</div>
<div class="demo-box">
  <h2 class="title">Alert 警告组件</h2>
  <tiny-alert
    size="large"
    type="success"
    description="成功提示的文案"
  ></tiny-alert>
  <tiny-alert size="large" description="提示文案"></tiny-alert>
  <tiny-alert
    size="large"
    type="error"
    description="出错提示的文案"
  ></tiny-alert>
  <tiny-alert
    size="large"
    type="warning"
    description="警告提示的文案"
  ></tiny-alert>
</div>
<div class="demo-box">
  <h2 class="title">FallMenu 瀑布菜单组件</h2>
  <tiny-fall-menu :data="dataset"></tiny-fall-menu>
</div>
<div class="demo-box">
  <h2 class="title">Layout 布局组件</h2>
  <tiny-layout>
    <tiny-row>
      <tiny-col :span="12">
        <div class="col">span 12</div>
      </tiny-col>
    </tiny-row>
    <tiny-row>
      <tiny-col :span="3">
        <div class="col">span 3</div>
      </tiny-col>
      <tiny-col :span="6">
        <div class="col">span 6</div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">span 3</div>
      </tiny-col>
    </tiny-row>
    <tiny-row>
      <tiny-col :span="2">
        <div class="col">span 2</div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">span 3</div>
      </tiny-col>
      <tiny-col :span="2">
        <div class="col">span 2</div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">span 3</div>
      </tiny-col>
      <tiny-col :span="2">
        <div class="col">span 2</div>
      </tiny-col>
    </tiny-row>
  </tiny-layout>
</div>
<div class="demo-box">
  <h2 class="title">Button 组件</h2>
  <tiny-button>默认按钮</tiny-button>
  <tiny-button type="primary">主要按钮</tiny-button>
  <tiny-button type="success">成功按钮</tiny-button>
  <tiny-button type="info">信息按钮</tiny-button>
  <tiny-button type="warning">警告按钮</tiny-button>
  <tiny-button type="danger">危险按钮</tiny-button>
</div>
<div class="demo-box">
  <h2 class="title">Input 组件</h2>
  <tiny-input v-model="input" placeholder="请输入内容"></tiny-input>
  <br />
  <br />
  <tiny-input
    type="textarea"
    :rows="2"
    placeholder="请输入内容"
    v-model="textarea"
  ></tiny-input>
</div>
<div class="demo-box">
  <h2 class="title">Select 组件</h2>
  <tiny-select v-model="select" placeholder="请选择">
    <tiny-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </tiny-option>
  </tiny-select>
</div>
<div class="demo-box">
  <h2 class="title">DropTimes 组件</h2>
  <tiny-drop-times v-model="dropTimes" placeholder="请选择"></tiny-drop-times>
</div>
<div class="demo-box">
  <h2 class="title">DatePiker 组件</h2>
  <tiny-date-picker
    v-model="dataPikerValue"
    type="daterange"
    :picker-options="onPickOptions"
  ></tiny-date-picker>
</div>
<div class="demo-box">
  <h2 class="title">Form 表单</h2>
  <tiny-form ref="form" :model="form" label-width="80px">
    <tiny-form-item label="活动名称">
      <tiny-input v-model="form.name"></tiny-input>
    </tiny-form-item>
    <tiny-form-item label="活动区域">
      <tiny-select v-model="form.region" placeholder="请选择活动区域">
        <tiny-option label="区域一" value="shanghai"></tiny-option>
        <tiny-option label="区域二" value="beijing"></tiny-option>
      </tiny-select>
    </tiny-form-item>
    <tiny-form-item label="即时配送">
      <tiny-switch v-model="form.delivery"></tiny-switch>
    </tiny-form-item>
    <tiny-form-item label="活动性质">
      <tiny-checkbox-group v-model="form.type">
        <tiny-checkbox label="美食/餐厅线上活动" name="type"></tiny-checkbox>
        <tiny-checkbox label="地推活动" name="type"></tiny-checkbox>
        <tiny-checkbox label="线下主题活动" name="type"></tiny-checkbox>
        <tiny-checkbox label="单纯品牌曝光" name="type"></tiny-checkbox>
      </tiny-checkbox-group>
    </tiny-form-item>
    <tiny-form-item label="特殊资源">
      <tiny-radio-group v-model="form.resource">
        <tiny-radio label="线上品牌商赞助"></tiny-radio>
        <tiny-radio label="线下场地免费"></tiny-radio>
      </tiny-radio-group>
    </tiny-form-item>
    <tiny-form-item label="活动形式">
      <tiny-input type="textarea" v-model="form.desc"></tiny-input>
    </tiny-form-item>
    <tiny-form-item>
      <tiny-button type="primary" @click="onSubmit">立即创建</tiny-button>
      <tiny-button>取消</tiny-button>
    </tiny-form-item>
  </tiny-form>
</div>
<div class="demo-box">
  <h2 class="title">Grid 组件</h2>
  <tiny-grid
    :data="tableData"
    border
    :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
  >
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
    <tiny-grid-column field="created_date" title="创建日期"></tiny-grid-column>
    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
    <tiny-grid-column
      field="boole"
      title="布尔值"
      align="center"
      format-text="boole"
    ></tiny-grid-column>
    <tiny-pager
      slot="pager"
      :current-page="1"
      :page-size="10"
      layout="total, prev, pager, next, jumper, sizes"
    ></tiny-pager>
  </tiny-grid>
</div>
<div class="demo-box">
  <h2 class="title">Pager 组件</h2>
  <tiny-pager
    layout="total,prev, pager, next, jumper,sizes,->"
    :total="1000"
  ></tiny-pager>
</div>
<div class="demo-box">
  <h2 class="title">Transfer 组件</h2>
  <tiny-transfer v-model="transferValue" :data="transferData"></tiny-transfer>
</div>
<div class="demo-box">
  <h2 class="title">Tree 组件</h2>
  <tiny-tree :data="treeData"></tiny-tree>
</div>
<div class="demo-box">
  <h2 class="title">Loading 组件</h2>
  <div id="tiny-loading1" style="width: 100%; height: 120px">测试</div>
  <div v-loading="true" style="width: 100%; height: 120px">测试</div>
</div>
<div class="demo-box">
  <h2 class="title">Modal 组件</h2>
  <tiny-button @click="confirmClick" :reset-time="0">确认提示框</tiny-button>
</div>
<div class="demo-box">
  <h2 class="title">Icon 组件</h2>
  <tiny-icon-share class="tiny-svg-size icon-share"></tiny-icon-share>
  <tiny-icon-del class="tiny-svg-size icon-del"></tiny-icon-del>
  <tiny-icon-writing class="tiny-svg-size icon-writing"></tiny-icon-writing>
  <tiny-icon-ascending
    class="tiny-svg-size icon-ascending"
  ></tiny-icon-ascending>
  <tiny-icon-clock-work
    class="tiny-svg-size icon-clockWork"
  ></tiny-icon-clock-work>
  <h4>组件图标</h4>
  <tiny-button :icon="IconSearch()"></tiny-button>
  <tiny-button type="primary" :icon="IconEdit()"></tiny-button>
  <tiny-button type="success" :icon="IconYes()"></tiny-button>
  <tiny-button type="info" :icon="IconMail()"></tiny-button>
  <tiny-button type="warning" :icon="IconStarO()"></tiny-button>
  <tiny-button type="danger" :icon="IconDel()"></tiny-button>
</div>
<div class="demo-box">
  <h2 class="title">bar</h2>
  <tiny-chart-bar :data="chartData"></tiny-chart-bar>
</div>
<div class="demo-box">
  <h2 class="title">candle</h2>
  <tiny-chart-candle :data="chartData2"></tiny-chart-candle>
</div>
<div class="demo-box">
  <h2 class="title">funnel</h2>
  <tiny-chart-funnel :data="chartData3"></tiny-chart-funnel>
</div>
<div class="demo-box">
  <h2 class="title">gauge</h2>
  <tiny-chart-gauge :data="chartData4"></tiny-chart-gauge>
</div>
<div class="demo-box">
  <h2 class="title">graph</h2>
  <tiny-chart-graph :extend="extend"></tiny-chart-graph>
</div>
<div class="demo-box">
  <h2 class="title">heatmap</h2>
  <tiny-chart-heatmap :data="chartData5"></tiny-chart-heatmap>
</div>
<div class="demo-box">
  <h2 class="title">histogram</h2>
  <tiny-chart-histogram :data="chartData6"></tiny-chart-histogram>
</div>
<div class="demo-box">
  <h2 class="title">line</h2>
  <tiny-chart-line :data="chartData7"></tiny-chart-line>
</div>
<div class="demo-box">
  <h2 class="title">pie</h2>
  <tiny-chart-pie :data="chartData10"></tiny-chart-pie>
</div>
<div class="demo-box">
  <h2 class="title">radar</h2>
  <tiny-chart-radar :data="chartData11"></tiny-chart-radar>
</div>
<div class="demo-box">
  <h2 class="title">ring</h2>
  <tiny-chart-ring :data="chartData12"></tiny-chart-ring>
</div>
<div class="demo-box">
  <h2 class="title">sankey</h2>
  <tiny-chart-sankey
    :data="chartData13"
    :settings="chartSettings13"
  ></tiny-chart-sankey>
</div>
<div class="demo-box">
  <h2 class="title">scatter</h2>
  <tiny-chart-scatter :data="chartData14"></tiny-chart-scatter>
</div>
<div class="demo-box">
  <h2 class="title">sunburst</h2>
  <tiny-chart-sunburst :extend="extend2"></tiny-chart-sunburst>
</div>
<div class="demo-box">
  <h2 class="title">tree</h2>
  <tiny-chart-tree :data="chartData15"></tiny-chart-tree>
</div>
